<template>
  <div class="songListDetail">
    <listviewHeader></listviewHeader>
    <div class="listview" ref="listview">
      <listviewTop
        :coverImgUrl="playList.coverImgUrl"
        :playCount="playList.playCount"
        :name="playList.name"
        :playList="playList"
        :avatarUrl="playList.creator.avatarUrl"
        :nickname="playList.creator.nickname"
        :description="playList.description"
        :commentCount="playList.commentCount"
        :shareCount="playList.shareCount"
      ></listviewTop>
      <playList :playlist="playList"></playList>
    </div>

    <!-- 骨架屏 -->
    <!-- <van-skeleton :row="21" :loading="loading"> </van-skeleton> -->
  </div>
</template>

<script>
import BScroll from "@better-scroll/core";
import useSkeleton from "@/hooks/useSkeleton.js";
import listviewTop from "@/components/listview/listViewTop.vue";
import listviewHeader from "@/components/listview/listViewHead.vue";
import playList from "@/components/playList.vue";
import { getPlayListDetail } from "../api/index.js";
import playCount from "../utils/playCount.js";
export default {
  name: "Listview",
  components: {
    listviewTop,
    playList,
    listviewHeader,
  },
  data() {
    return {
      playList: {
        creator: {},
        tracks: {},
      },
    };
  },
  methods: {
    getPlayLists: async function(id) {
      const { data: res } = await getPlayListDetail(id);
      this.playList = res.playlist;
      this.playList.playCount = playCount("number", this.playList.playCount);
      //把歌曲列表放到vuex中
      this.$store.commit("setPlaylist", this.playList.tracks);
      // this.playList.loading = false;
    },
  },
  mounted() {
    this.getPlayLists(this.$route.query.id);
    // this.$nextTick(() => {
    //   this.scroll = new BScroll(this.$refs.listview, {
    //     // click: true,
    //     // pullUpLoad: true,
    //   });
    // });
  },
};
</script>

<style lang="less" scoped>
.songListDetail {
  // height: 100vh;
  overflow: hidden;
}
.listview {
  // height: 100vh;
  overflow-y: hidden;
}
</style>
